import { connect } from '../../vendors/weapp-redux.js'
import CardHead from '../../components/business-card-button-head/business-card-button-head.js'

let pageConfig = {
  data: {
    list: [
      {
        cardData: {
          name: '王俊森',
          title: '项目管理',
          introduction: '善于项目管理，大数据分析之神，架构师，IT行业投资顾问，总之上面都是瞎扯的。',
          style: '',
          avatar: '../../images/avatar.jpg'
        },
        cardHeadData: CardHead.defaultData
      },
      {
        cardData: {
          name: '王俊森2',
          title: '项目管理',
          introduction: '善于项目管理，大数据分析之神，架构师，IT行业投资顾问，总之上面都是瞎扯的。',
          style: '',
          avatar: '../../images/avatar.jpg'
        },
        cardHeadData: CardHead.defaultData
      },
      {
        cardData: {
          name: '王俊森3',
          title: '项目管理',
          introduction: '善于项目管理，大数据分析之神，架构师，IT行业投资顾问，总之上面都是瞎扯的。',
          style: '',
          avatar: '../../images/avatar.jpg'
        },
        cardHeadData: CardHead.defaultData
      }
    ],
    delBtnWidth: 84  //删除按钮宽度单位(px)
  },
  handCard(event) {
    const index = event.target.dataset.index
    const list = this.data.list
    list[index].cardHeadData = {
      status: 'handed',
      text: '已添加'
    }
    this.setData({
      list
    })
  },
  cardDetail(event) {
    wx.navigateTo({
      url: '/pages/business-card-details/business-card-details'
    })
  },
  touchStart(event) {
    if (event.touches.length === 1) {
      this.setData({
        startX: event.touches[0].clientX
      })
    }
  },
  touchMove(event) {
    if (event.touches.length === 1) {
      const moveX = event.touches[0].clientX
      const disX = this.data.startX - moveX
      const delBtnWidth = this.data.delBtnWidth
      let style = ''
      if (disX > 0) {
        style = `left:-${disX}px`
        if (disX > delBtnWidth) {
          style = `left:-${delBtnWidth}px`
        }
      } else {
        style = 'left:0px'
      }

      const touchIndex = event.currentTarget.dataset.index
      const list = this.data.list
      list[touchIndex].style = style
      this.setData({
        list
      })
    }
  },
  touchEnd(event) {
    if (event.changedTouches.length === 1) {
      const endX = event.changedTouches[0].clientX
      const disX = this.data.startX - endX
      const delBtnWidth = this.data.delBtnWidth
      const style = disX > delBtnWidth / 2 ? `left:-${delBtnWidth}px` : 'left:0px'

      const touchIndex = event.currentTarget.dataset.index
      const list = this.data.list
      list[touchIndex].style = style
      this.setData({
        list
      })
    }
  },
  delItem(event) {
    const index = event.target.dataset.index
    const list = this.data.list
    list.splice(index, 1)
    this.setData({
      list
    })
  }
}


let mapStateToData = state => {
  return {
  }
}

let mapDispatchToPage = dispatch => {
}

pageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig)
Page(pageConfig)
